<!-- 展示页面视图 - 用于展示应用的演示功能或特定内容 -->
<template>
  <div class="show-container">
    <!-- 头部导航 -->
    <header class="show-header">
      <h1>展示页面</h1>
      <nav class="show-nav">
        <!-- 下拉菜单组件 -->
        <DropdownMenu
          title="菜单"
          :items="menuItems"
          @item-click="handleMenuItemClick"
          position="bottom-right"
          :width="120"
        />
        <button class="nav-btn" @click="goToLogin">登录</button>
        <button class="nav-btn" @click="showMessageDemo">功能2</button>
      </nav>
    </header>

    <!-- 主内容区 -->
    <main class="show-main">
      <div class="content-card">
        <h2>内容标题</h2>
        <p>这里是主要内容区域</p>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { showMessage, successMessage, warningMessage, errorMessage, infoMessage } from '../utls/message'
import type { MessageInstance } from '../utls/message'
import DropdownMenu from '../components/common/DropdownMenu.vue'
import type { DropdownItem } from '../components/common/DropdownMenu.vue'

const router = useRouter()

// 菜单项数据
const menuItems = ref<DropdownItem[]>([
  { id: '1', name: '选项1' },
  { id: '2', name: '选项2' },
  { id: '3', name: '选项3' },
  { id: '4', name: '选项4' },
  { id: '5', name: '选项5' },
  { id: '6', name: '选项6' },
  { id: '7', name: '验证测试' }
])

// 处理菜单项点击事件
const handleMenuItemClick = (item: DropdownItem) => {
  console.log('点击了菜单项:', item.id, item.name)
  
  // 选项1添加跳转到Try.vue页面
  if (item.id === '1') {
    router.push('/try')
    return
  }
  
  // 选项7添加跳转到验证测试页面
  if (item.id === '7') {
    router.push('/verify')
    return
  }
  
  showMessage(`您点击了选项${item.id}`)
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}

// 点击功能2按钮时显示不同类型的消息提示
const showMessageDemo = () => {
  // 随机显示一种类型的消息
  const messageTypes: (() => MessageInstance)[] = [
    () => showMessage('这是基本消息提示'),
    () => successMessage('操作成功！'),
    () => warningMessage('请注意，这是警告信息'),
    () => errorMessage('发生错误，请重试'),
    () => infoMessage('这是一条提示信息')
  ]
  
  // 随机选择一个方法执行
  const randomIndex: number = Math.floor(Math.random() * messageTypes.length)
  messageTypes[randomIndex]!()
}
</script>

<style scoped>
.show-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.show-header {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.show-header h1 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.show-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.nav-btn:hover {
  background: #f0f0f0;
}

.show-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-card h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.content-card p {
  margin: 0;
  color: #666;
}
</style>